<template>

	<view class="ads-container">
		<!-- 顶部标题栏 -->
		<text style="color:#999;font-size:24rpx">广告</text>
		<!-- 优惠券内容 -->
		<view class="coupon-content">
			<image class="icon" src="/static/imgs/red-envelope.jpg" />
			<view class="benefit-text">来自充电福利</view>
			<view class="amount">
				<text class="plus">+</text>
				<text class="number">30.00</text>
				<!-- <text class="unit">最高</text> -->
			</view>
		</view>

		<!-- 优惠券信息列表 -->
		<view class="info-list">
			<view class="info-item">
				<text class="label">领取状态</text>
				<text class="value status">待领取</text>
			</view>
			<view class="info-item">
				<text class="label">有效时间</text>
				<text class="value">充电、消费享立减优惠</text>
			</view>
			<view class="info-item">
				<text class="label">交易单号</text>
				<text class="value">{{serial_number}}</text>
			</view>
			<view class="info-item">
				<text class="label">发放形式</text>
				<text class="value">领取后自动发放到微信卡包，请在「微信-卡包-券和礼品卡」中查看</text>
			</view>
			<view class="info-item">
				<text class="label">使用方式</text>
				<text class="value">使用微信银行卡支付自动抵扣</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btns">
			<button class="receive-btn" @click="toDetail">立即领</button>
			<button class="detail-btn" @click="toDetail">查看详情</button>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		redirectToWechatAuth
	} from "@/config/config";
	//页面加载
	onLoad((option) => {
		createSerialNumber();
		if (option.channel) {
			uni.setStorageSync("channel", option.channel);
		}
	})

	const toDetail = () => {
		
		const searchParams = new URLSearchParams(window.location.search).toString()
		uni.navigateTo({
			url:'/pages/index/active?'+searchParams,
		
		})
		// redirectToWechatAuth();
	}
	const serial_number = ref('');
	const createSerialNumber = () => {
		serial_number.value = Math.random().toString(10).substring(2, 7) + Math.random().toString(10).substring(2, 15)
	}
</script>

<style lang="scss" scoped>
	.ads-container {
		padding: 20rpx;
		background: #fff;
		min-height: 100vh;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;

		.close-btn {
			font-size: 40rpx;
			color: #999;
		}

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.domain {
			font-size: 28rpx;
			color: #666;
		}
	}

	.coupon-content {
		text-align: center;
		padding: 20rpx 0;

		.icon {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 20rpx;
		}

		.benefit-text {
			font-size: 32rpx;
			color: #333;
			margin-bottom: 20rpx;
		}

		.amount {

			.plus,
			.number {
				font-size: 60rpx;
				font-weight: bold;
			}

			.unit {
				font-size: 24rpx;
				color: #999;
				margin-left: 10rpx;
			}
		}
	}

	.info-list {
		.info-item {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;

			.label {
				width: 160rpx;
				color: #999;
				font-size: 28rpx;
			}

			.value {
				flex: 1;
				font-size: 28rpx;

				&.status {
					color: #f86442;
				}
			}
		}
	}

	.bottom-btns {
		margin-top: 60rpx;

		button {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			margin-bottom: 20rpx;
			border-radius: 8rpx;
			font-size: 32rpx;

			&.receive-btn {
				background: #cc6552;
				color: #fff;
			}

			&.detail-btn {
				background: #fff;
				color: #666;
				border: 1rpx solid #ddd;
			}
		}
	}
</style>